<template>
  <div class="login">
    <div class="login-container">
      <div class="logo">
        <img class="auto-img" src="../assets/logo.png" alt="" />
      </div>

      <div class="login-form">
        <div class="group-item">
          <el-input
            id="username"
            v-model="username"
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
            class="username"
            clearable
            ref="username"
          ></el-input>
        </div>

        <div class="group-item">
          <el-input
            id="pwd"
            placeholder="请输入密码"
            v-model="pwd"
            show-password
            prefix-icon="el-icon-lock"
            class="pwd"
            clearable
            ref="pwd"
          >
          </el-input>
        </div>

        <div class="group-item">
          <el-button class="login-btn" type="primary" @click="login"
            >登录</el-button>
          <el-button class="login-btn reset" type="primary" @click="reset"
            >重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: "",
      pwd: "",
    };
  },
  methods: {
    login() {
      // 
      if (this.username == "" || this.pwd == "") {
        // alert('账号或密码不能为空');
        this.$message({
          message: "账号或密码不能为空",
          type: "warning",
        });
        return;
      }

      this.axios({
        method: "post",
        url: "login",
        data: {
          username: this.username,
          password:this.pwd,
        },
      })
        .then((result) => {

          if (this.username == "admin" && this.pwd == "123456") {
            

            if(result.data.meta.status == 200){
              // localStorage.setItem('token',result.data.data.token);
              sessionStorage.setItem('token',result.data.data.token);

              // setTimeout(()=>{
                 this.$router.push({ name: "Home" });
                 this.$message({
                   message:'登录成功！',
                   type:'success'
                 });
              // },1000)
            }

           
          } else {
            this.$message.error("账号或密码错误");
          }
        })
        .catch((err) => {
          
        });

    },

    reset(){
      // 清空输入框
      this.username = '';
      this.pwd = '';

      // 将光标移到账号输入框
      this.$refs.username.focus();

    }
  },
};
</script>

<style lang="less" scoped>
// html,body{
//   width: 100%;
//   height: 100%;
//   margin: 0;
//   padding: 0;
//   background-color: #2d3a4b;
// }
.login {
  height: 100%;
  background-color: #2d3a4b;
}
.login-container {
  width: 450px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 5px;
}

.logo {
  background-color: #fff;
  width: 150px;
  height: 150px;
  border: 8px solid #ddd;
  border-radius: 50%;
  margin: -75px auto;
  img {
    margin-top: 6px;
  }
}
.login-form {
  padding: 0px 26px 12px;
  margin-top: 100px;

  .group-item {
    margin-bottom: 26px;
    &:last-child{
      // border: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .login-btn {
      // width: 100%;
      font-size: 16px;
      letter-spacing: 4px;
      margin-top: 12px;
    }
    .reset{
      background-color: #aaa;
      border: 1px solid #aaa;
    }
    /deep/ .el-input__icon {
      // border: 1px solid #000;
      font-size: 18px;
    }
    /deep/ .el-input__inner {
      padding-left: 32px;
    }
  }
}
</style>

<style lang="less">

</style>